/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/

$stable:                          #8bc34a !default;
$balanced:                        #c5e1a5 !default;
$positive:                        #558b2f !default;
$highlight:                       #ffcc80;


// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";


.bar-stable .button:hover {
  color: #ffffff;
}

.bar-stable .button.button-icon {
  color: #ffffff;
}

.bar.bar-stable .title {
  color: #ffffff;
  font-size: 160%;
}

$main:              #8bc34a;
$main-lighter:      #c5e1a5;
$main-thicker:      #558b2f;
$text-in-highlight: #666666;

.main{
  color: $main;
}

.main-thicker{
  color: $main-thicker;
}

.highlight{
  color: $highlight !important;
}

.bg-thicker{
  background-color: $main-thicker;
}

.bg-main{
  background-color: $main;
}

.bg-highlight{
  background-color: $highlight;
}

.button.button-clear.text-in-highlight{
  color: $text-in-highlight;
}

.article-cover-image{
  position: relative;
}

$left-distance: 10px;
.article-cover-image .article-cover-image-title{
  position: absolute;
  top: 0px;
  left: $left-distance;
  color: darken($light,10%);
  font-size: 20px;
}

.vertical-bar{
  height: 24px;
  width: 4px; 
  background-color: $main;
  position: absolute;
  left: $left-distance;
  top: 45px;
}

.article-cover-image-other-info{
  position: absolute;
  color: darken($light,20%);
  font-size: 12px;
  top: 45px;
  left: $left-distance + 10px;
}

@mixin avatar{
  border-radius: 50%;
}

.image-avatar-xl{
  width: 90px;
  height: 90px;
  @include avatar;
}

.image-avatar-lg{
  width: 75px;
  height: 75px;
  @include avatar;
}

.image-avatar-md{
  width: 60px;
  height: 60px;
  @include avatar;
}

.image-avatar-sm{
  width: 50px;
  height: 50px;
  @include avatar;
}

.article-cover-image-avatar{
  position: absolute;
  bottom: 15px;
  left: $left-distance;
  width: 40px;
  height: 40px;
  @include avatar;
}

.article-cover-image-author-name{
  position: absolute;
  color: darken($light,20%);
  font-size: 12px;
  bottom: 25px;
  left: $left-distance + 50px;
}

.floating-round-button{
  position: absolute;
  bottom: 35px;
  right: 25px;
  background-color: $main;
  width: 50px;
  height: 50px;
  z-index: 999;
  border-radius: 50%;
}

.floating-round-button i.icon{
  position: absolute;
  font-size: 40px;
  left: 12px;
  top: 7px;
}

.block-highlight{
  background-color: $highlight;
  position: relative;
}

.article-author-name{
  color: $text-in-highlight;
  font-size: 20px;
  line-height: 60px;
}

.col.col-center{
  text-align: center;
  color: $text-in-highlight;
}
.row.bottom-border{
  border-bottom:medium dotted $main-thicker;
}

.center-text{
  text-align: center;
}

.location-bar{
  float: right;
  display: inline-block;
  padding-right: 15px;
  padding-left: 15px;
  background-color: darken($highlight,10%);
  border-radius: 8px;
}

.button.toggle-button{
  font-size: 24px;
}

@mixin vertical-compacted{
  padding-bottom: 0px;
  padding-top: 0px;
}

.item.item-vertical-compacted{
  @include vertical-compacted;
}

.col.col-vertical-compacted{
  @include vertical-compacted;
}

.row.row-vertical-compacted{
  @include vertical-compacted;
}

a.block{
  display: block;
}

input.transparent-file{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%;
  opacity: 0;
  z-index: 9;
}

.button.half-bar-button{
  position: absolute; 
  top: 5px; 
  display: block; 
  width: 50%;
  padding: 0px; 
  font-size: 20px;
}

img.tilt-notification-belt-img{
  position: absolute;
  bottom: 4px;
  right: 0px;
}

a.container{
  position: relative;
}

.product-category-cover-image-title-wrapper{
  position: absolute; 
  left: 50%; 
  top: 0px;
}

.product-category-cover-image-main-title{
  float: left;
  position: relative;
  right: 50%;
  color: $highlight;
  border-radius: 10px;
  background-color: rgba(0,0,0,0.4);
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 2px;
}

.bar.bar-dark.bar-half-transparent{
  background-color: rgba(0, 0, 0,0.7);
}

.icon.icon-interaction{
  font-size: 20px; 
  vertical-align: -3px; 
  float:right;
}

.interaction-number{
  float:right;  
  padding-left: 3px;
}

.external-map{
  height: 160px; 
  width: 100%;
}

.external-map-large{
  height: 320px; 
  width: 100%;
}

.no-padding{
  padding: 0px;
}